<template>
	<view class="container">
		<view class="page-header">
			<text class="page-title">创建新项目</text>
		</view>
		
		<view class="form-container">
			<view class="form-item">
				<text class="form-label">项目名称</text>
				<input class="form-input" type="text" v-model="projectForm.name" placeholder="请输入项目名称，如 Sample_01" />
			</view>
			
			<view class="form-item">
				<text class="form-label">样品类型</text>
				<picker class="form-picker" mode="selector" :range="sampleTypes" @change="handleSampleTypeChange">
					<view class="picker-value">
						<text>{{ projectForm.sampleType || '请选择样品类型' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label">液体种类</text>
				<picker class="form-picker" mode="selector" :range="liquidTypes" @change="handleLiquidTypeChange">
					<view class="picker-value">
						<text>{{ projectForm.liquidType || '请选择液体种类' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label">备注信息</text>
				<textarea class="form-textarea" v-model="projectForm.notes" placeholder="可选：输入项目相关备注信息" />
			</view>
		</view>
		
		<view class="form-actions">
			<button class="cancel-btn" @click="handleCancel">取消</button>
			<button class="submit-btn" @click="handleSubmit">创建项目</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 表单数据
const projectForm = reactive({
	name: '',
	sampleType: '',
	liquidType: '',
	notes: ''
})

// 样品类型选项
const sampleTypes = ref([
	'玻璃',
	'硅片',
	'塑料',
	'金属',
	'其他'
])

// 液体种类选项
const liquidTypes = ref([
	'去离子水',
	'乙醇',
	'丙酮',
	'其他'
])

// 样品类型变更处理
const handleSampleTypeChange = (e) => {
	projectForm.sampleType = sampleTypes.value[e.detail.value]
}

// 液体种类变更处理
const handleLiquidTypeChange = (e) => {
	projectForm.liquidType = liquidTypes.value[e.detail.value]
}

// 取消按钮点击事件
const handleCancel = () => {
	uni.navigateBack()
}

// 提交按钮点击事件
const handleSubmit = () => {
	// 表单验证
	if (!projectForm.name) {
		uni.showToast({
			title: '请输入项目名称',
			icon: 'none'
		})
		return
	}
	
	if (!projectForm.sampleType) {
		uni.showToast({
			title: '请选择样品类型',
			icon: 'none'
		})
		return
	}
	
	if (!projectForm.liquidType) {
		uni.showToast({
			title: '请选择液体种类',
			icon: 'none'
		})
		return
	}
	
	// 创建项目对象
	const newProject = {
		id: Date.now().toString(), // 使用时间戳作为唯一ID
		title: projectForm.name,
		sampleType: projectForm.sampleType,
		liquidType: projectForm.liquidType,
		notes: projectForm.notes,
		createTime: new Date().toISOString(),
	}
	
	// 获取已有项目列表
	let projectList = uni.getStorageSync('projectList') || []
	
	// 添加新项目
	projectList.push(newProject)
	
	// 保存到本地存储
	uni.setStorageSync('projectList', projectList)
	
	// 保存成功后返回首页
	uni.showToast({
		title: '创建成功',
		icon: 'success',
		success: () => {
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	})
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.page-header {
	margin-bottom: 40rpx;
}

.page-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
}

.form-container {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.form-input, .form-picker, .form-textarea {
	width: 100%;
	height: 80rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #fff;
	box-sizing: border-box;
}

.form-textarea {
	height: 160rpx;
	padding: 20rpx;
	line-height: 1.5;
}

.picker-value {
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333;
}

.picker-arrow {
	font-size: 24rpx;
	color: #999;
}

.form-actions {
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
	gap: 30rpx;
}

.cancel-btn, .submit-btn {
	flex: 1;
	height: 90rpx;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
	border: 1px solid #ddd;
}

.submit-btn {
	background-color: #1890ff;
	color: #fff;
}
</style>
